<template>
  <li class="e-treeitem" :class="{ 'is-expanded': root.expanded }">
    <div
      class="e-treeitem_content"
      :style="{ 'padding-left': (root.level - 1) * indent + 'px' }"
    >
      <span
        class="treeitem_content_icon"
        :class="[root.hasChildren ? '' : 'is-leaf']"
      >
        <i
          @click="handleExpandIconClick(root)"
          :class="[
            !root.expanded ? 'icon-e-turning-down' : 'icon-e-turning-right',
          ]"
        ></i>
        <i v-if="root.loadStatus" class="icon-e-loading"></i>
      </span>
      <span class="treeitem_checkbox" v-if="showCheckbox">
        <e-checkbox
          :style="{ visibility: root.isCheckbox ? 'hidden' : 'visible' }"
          v-model="root.checked"
          @change="handleCheckedClick"
          :indeterminate="root.indeterminate"
        ></e-checkbox>
      </span>
      <span class="treeitem_content_label">{{ root.text }}</span>
    </div>
    <template v-if="lazyLoad">
      <ul class="e-tree" v-if="lazyLoad && root.load">
        <e-tree-item
          v-for="item in root[props.children]"
          :key="item.id"
          :root="item"
          :show-checkbox="showCheckbox"
          :indent="indent"
          :props="props"
        ></e-tree-item>
      </ul>
    </template>
    <template v-else>
      <ul
        class="e-tree"
        v-if="root[props.children] && root[props.children].length > 0"
      >
        <e-tree-item
          v-for="item in root[props.children]"
          :key="item.id"
          :root="item"
          :show-checkbox="showCheckbox"
          :indent="indent"
          :props="props"
        ></e-tree-item>
      </ul>
    </template>
  </li>
</template>

<script>
import ECheckbox from "../../checkbox/src/checkbox.vue";
export default {
  name: "ETreeItem",
  components: {
    ECheckbox,
  },
  inject: ["eTree"],
  props: {
    root: Object,
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    indent: {
      type: Number,
      default: 18,
    },
    lazyLoad: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
          disabled: "disabled",
          checked: "checked",
          isCheckbox: "isCheckbox",
        };
      },
    },
  },
  watch: {
    // "root.checked"(val) {
    //   // this.eTree.$emit("check-change", this.root, val);
    // },
  },
  created() {
    if (this.$parent) {
      this.tree = this.$parent;
    }
    this.$on("check-change", (data, ischecked) => {
      // 设置选中状态
      if (this.root[this.props.children]) {
        const arrs = this.root[this.props.children].filter((v) => v.checked);
        if (arrs.length === 0) {
          this.root.checked = false;
          this.root.indeterminate = false;
          this.tree.$emit("check-change", this.root, false);
        } else if (
          arrs.length > 0 &&
          arrs.length < this.root[this.props.children].length
        ) {
          this.root.checked = false;
          this.root.indeterminate = true;
          this.tree.$emit("check-change", this.root, false);
        } else {
          this.root.checked = true;
          this.root.indeterminate = false;
          this.tree.$emit("check-change", this.root, true);
        }
        if (
          this.root[this.props.children].filter((v) => v.indeterminate).length >
          0
        ) {
          this.root.indeterminate = true;
          this.tree.$emit("check-change", this.root, false);
        }
      }
    });
  },
  // beforeUpdate() {
  //   console.log("beforeUpdate" + this.root.text);
  // },
  // updated() {
  //   if (this.root.loadStatus) {
  //     setTimeout(() => {
  //       this.root.loadStatus = false;
  //     }, 200);
  //   }
  // },
  methods: {
    handleExpandIconClick(data) {
      data.expanded = !data.expanded;
      if (this.lazyLoad) {
        if (!data.load) {
          data.load = true;
          data.loadStatus = true;
          this.$nextTick(() => {
            data.loadStatus = false;
            this.$forceUpdate();
          });
        }
      }
    },
    handleCheckedClick(val) {
      this.eTree.$emit("check", this.root, val);
      // 选中
      if (this.root[this.props.children]) {
        this.selectAll(this.root[this.props.children], val);
      }
      if (val) {
        this.root.indeterminate = false;
      }
      // 反选
      if (this.root.level === 1) {
        this.$emit("check-change", this.root, val);
      } else {
        this.tree.$emit("check-change", this.root, val);
      }
    },
    selectAll(data, flag) {
      data.map((item) => {
        item.checked = flag;
        if (item[this.props.children] && item[this.props.children].length > 0) {
          this.selectAll(item[this.props.children], flag);
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.e-tree {
  list-style: none;
  color: #606266;
  padding: 0px;
}

.e-treeitem {
  .e-treeitem_content {
    display: flex;
    align-items: center;
    height: 26px;
    cursor: pointer;

    &:hover {
      background: #f5f7fa;
    }

    .treeitem_content_icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

      i {
        font-size: 18px;
        cursor: pointer;
        color: #c0c4cc;
      }
      &.is-leaf {
        cursor: default;
        width: 18px;
        height: 20px;
        i {
          display: none;
        }
      }
    }

    .treeitem_checkbox {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      >>>.e-checkbox {
        margin-right: 0px;
        line-height: normal;
      }
    }

    .treeitem_content_label {
      font-size: 14px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.is-expanded {
    .e-tree {
      display: none;
    }
  }
}
</style>
